<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="abc" class="box" title="box" age="18" height="1.88">
    我是box
  </div>

  <input type="checkbox" checked="checked">

  <script>
    // 所有的attribute都支持的操作
    var boxEl = document.querySelector(".box")
    console.log(
      boxEl.hasAttribute('age'), //true
      boxEl.hasAttribute('abc'), //false
      boxEl.hasAttribute('id'), //true
    )
    console.log(
      boxEl.getAttribute('age'), //18
      boxEl.getAttribute('abc'), //null
      boxEl.getAttribute('id'), //abc
    )

    boxEl.setAttribute('id', 'cba')
    console.log(boxEl.getAttribute('id')) // cba
    boxEl.removeAttribute("id")
    console.log(boxEl.hasAttribute('id')) // false

    var boxAttributes = boxEl.attributes
    for (var att of boxAttributes) {
      console.log(att.name, att.value)
    }

    // 通过getAttribute拿到的一定是字符串类型
    var inputEl = document.querySelector('input')
    console.log(inputEl.getAttribute("checked"))
    

  </script>
</body>

</html>